<template>
  <div class="manageList">
    <TopBars msg="栏目管理" />

    <div class="lists">
      <div class="delList list">
        <span class="title">删除不感兴趣的话题</span>
        <div class="delList_content content">
          <div
            class="item"
            v-for="(item,index) in unableList"
            :key="item.id"
            @click="delList(index)"
          >
            <span>{{ item.name }}</span>
            <div class="iconfont iconjian"></div>
          </div>
        </div>
      </div>

      <div class="addList list">
        <span class="title">添加感兴趣的话题</span>

        <div class="addList_content content">
          <div class="item" v-for="(item,index) in ableList" :key="item.id" @click="addList(index)">
            <span>{{ item.name }}</span>
            <div class="iconfont icontianjiaxiangmu"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBars from "@/components/TopBars";
export default {
  components: {
    TopBars
  },

  data() {
    return {
      unableList: [],
      ableList: []
    };
  },

  watch: {
    unableList() {
      localStorage.setItem("unable", JSON.stringify(this.unableList));
    },
    ableList() {
      localStorage.setItem("able", JSON.stringify(this.ableList));
    }
  },

  created() {
    const unableHtml = localStorage.getItem("unable");
    const ableHtml = localStorage.getItem("able");

    if (unableHtml) {
      this.unableList = JSON.parse(unableHtml);
      this.ableList = JSON.parse(ableHtml);
    } else {
      this.$axios({
        url: "/category"
      }).then(res => {
        console.log("栏目列表的返回结果", res);

        this.unableList = res.data.data;
      });
    }
  },

  methods: {
    delList(index) {
      if (this.unableList.length == 1) {
        return;
      }

      this.ableList.push(this.unableList[index]);
      this.unableList.splice(index, 1);
    },
    addList(index) {
      this.unableList.push(this.ableList[index]);
      this.ableList.splice(index, 1);
    }
  }
};
</script>

<style lang="less" scoped>
.manageList {
  .lists {
    padding: 0vw 5.556vw;

    .list {
      .title {
        font-size: 3.333vw;
        color: #666;
      }

      .content {
        display: flex;
        flex-wrap: wrap;
        padding-top: 4.444vw;

        .item {
          border: 0.278vw solid #ccc;
          width: 20%;
          height: 10vw;
          line-height: 10vw;
          text-align: center;
          margin-bottom: 2.222vw;
          position: relative;
          box-sizing: border-box;
          margin-right: 5.556vw;

          &:nth-child(4n) {
            margin-right: 0vw;
          }

          .iconfont {
            position: absolute;
            top: -4.444vw;
            right: -2.222vw;
            font-size: 3.333vw;
            color: #f56c6c;
          }

          .icontianjiaxiangmu {
            color: #67c23a;
          }
        }
      }
    }

    .delList {
      margin-top: 2.778vw;
    }

    .addList {
      margin-top: 5.556vw;
    }
  }
}
</style>